<template>
  <div>
    <h1>组件二</h1>
    <hr />
    count:{{ count }}
    <hr />
    count10:{{ count10 }}
    <hr />
    <!-- 直接添加  页面发生变化 但是devtools中的值不变 -->
    <button @click="$store.state.count++">+1</button>
    &nbsp; &nbsp;
    <button @click="handlerAddCount">+1 mutations</button>
    &nbsp; &nbsp;
    <button @click="handlerAddCountN">+N mutations</button>
    &nbsp; &nbsp;
    <button @click="handlerAddCountAction">+1 action</button>
    &nbsp; &nbsp;
    <button @click="handlerAddCountActionN">+N action</button>
    <hr />
    <button @click="handlerGetStatus">程序中获取状态</button>
  </div>
</template>

<script>
import { mapState,mapGetters,mapMutations,mapActions } from "vuex";

//   const result = mapMutations(['addCount'])
//   console.log(result);

// const map = mapState({
//     count:state => state.count,
// })
//     console.log( map);
export default {
  computed: {
    // ...mapState({
    //   count: (state) => state.count,
    // }),
    ...mapState(['count']),
    ...mapGetters(['count10'])
  },
  methods: {
    ...mapMutations(['addCount','addCountN']),
    ...mapActions(['addCountAction','addCountActionN']),
    handlerGetStatus() {
      // console.log(this.$store.state.count);
      // console.log(this.$store.getters.count10);
      console.log(this.count);
      console.log(this.count10);
    },
    handlerAddCountAction() {
      // 触发addCountAction  dispatch
      // this.$store.dispatch("addCountAction");
      this.addCountAction()
     
    },
    handlerAddCountActionN() {
        this.addCountActionN({
        a: 10,
        b: 20,
      })
    //   this.$store.dispatch("addCountActionN", {
    //     a: 10,
    //     b: 20,
    //   });
    },
    handlerAddCount() {
      // this.$store.commit("addCount");
      this.addCount()
    },
    handlerAddCountN() {
      // 调用addCountN时 有参数的
      /**
       * commit 在提交参数的时候  参数只能有一个  如果就想有多个
       * 通常  提交的是一个对象
       */
      this.addCountN({
        a: 10,
        b: 20,
      })
      // 不正确的写法
      // this.$store.commit('addCountN',10,20)
    //   this.$store.commit("addCountN", {
    //     a: 10,
    //     b: 20,
    //   });
    },
  },
};
</script>
<style></style>
